<template>
	<view :class="[userAddressList.length == 0 ? 'pagesbg' : '']">
		<!-- 头部 -->
		<pagehead>收货地址列表</pagehead>
		
		<!-- 主体 -->
		<view class="addrWrapper" v-if="isShowPage">
			<view class="noData" v-if="userAddressList.length == 0">
				<image class="noAddr" :src="IMAGE_STATIC+'/images/kong.png'" mode=""></image>
				<!-- <view class="noTitle">您还没有收货地址，请新增您的地址</view> -->
				<!-- <view class="noBtn" @tap="$tools.jump('./add')">新增</view> -->
			</view>
			<view class="addressBox" v-for="(item,index) in userAddressList" :key="index" @tap="goAddr(item)" v-else>
				<view class="address">
					<view class="addrBox">
						<view class="address-top">
							<view class="name">{{ item.name }}</view>
							<view class="phone">{{ item.tel }}</view>
						</view>
						<view class="addr">{{ item.address}}</view>
					</view>
				</view>
				<view class="address-bottom">
					<view class="address-r" @tap.stop="getEdit(item)">
						<image v-if="item.isdefault == '1'" :src="IMAGE_STATIC+'/images/radio-checked.png'" mode=""></image>
						<image v-else :src="IMAGE_STATIC+'/images/radio.png'" mode=""></image>
						<view class="mo">默认地址</view>
					</view>
					<view class="address-l">
						<view class="edit" @tap.stop="$tools.jump('./add',encodeURIComponent(JSON.stringify(item)))">修改</view>
						<view class="delete" @tap.stop="deleteAddr(item)">删除</view>
					</view>
				</view>
			</view>
			<view class="operateBox" :class="{'operateBox-bottomBox' : userAddressList.length >= 4}">
				<view class="operateBox-btn">
					<view class="operateBox-btn-chioce" @tap="$tools.jump('./add')">新增收货地址</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				IMAGE_STATIC: this.$url.assetsPath, // 静态图片地址
				active: 0,
				userAddressList: [
					{id:1,addressUserName:'张三',addressPhone:'13000000000',addressDetailed:'浙江省杭州市拱墅区莫干山路1165号复地北城中心1楼大健康俱乐部'}
				],
				comType: '',
				pages: 1,
				pageIndex: 1,
				pageSize: 10,
				lastId:'',
				lsShow:false, // 是否分页
				isShowPage: false,
				addrId: '',
			}
		},
		onLoad(options) {
			this.comType = options.value1;
		},
		onShow() {
			this.init();
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			console.log("ddd",this.lsShow)
			if (this.lsShow) {
				this.getAddrList();
			} else {
				return this.$tools.toast('到底了');
			}
		}, 
		methods: {
			init(){
				this.isShowPage = false;
				this.userAddressList = [];
				this.pageIndex = 1;
				this.pageSize = 10;
				this.lastId = ''
				this.getAddrList();
			},
			goAddr(item){
				if(this.comType == 1){
					uni.setStorageSync('address_id', item.address_id);
					// this.$tools.jump('/pages/confirmOrder/confirmOrder',item.address_id,2);
					this.$tools.back(1);
				}
			},
			// 修改默认地址
			getEdit(item){
				if(item.addressState == '1'){
					return;
				}
				let data={
					user_address_oper:'user_address_set',
					address_id:item.address_id,
					isdefault:'1',
				}
				console.log("data:",data);
				this.$Ajax('/api/user/address/updateUserAddress',data,	res => {
						this.$tools.toast(res.msg);
						this.init()
					},err =>{
					}
				)
			},
			// 修改
			edit(item){
				this.$tools.jump('./add',encodeURIComponent(JSON.stringify(item)));
			},
			// 删除地址
			deleteAddr(item){
				// this.addrId = item.id;
				// this.openPopup('delAddrPopup');
				console.log(item)
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定删除地址？',
					showCancel: true,
					success: ({ confirm, cancel }) => {
						if(confirm){
							let data={
								user_address_oper:'user_address_del',
								address_id:item.address_id
							}
							console.log('data',data)
							that.$Ajax('/api/user/address/updateUserAddress',
								data,
								res => {
										that.$tools.toast('删除地址成功');
										that.init()
									}
								)
						}
					}
				})
			},
			delAddrConfirm(){
				let that = this;
				var data = {};
				data['id'] = this.addrId;
				that.$Ajax('/app/userAddressRemove',
				data,
				res => {
						that.$tools.toastSuccess('删除地址成功');
						that.addrId = '';
						that.isShowPage = false;
						that.userAddressList = [];
						that.getAddrList();
						// this.hidePopup('delAddrPopup');
					}
				)
			},
			// 查询地址列表
			getAddrList(){
				var data = {
					last_id:this.lastId
				};
				let that = this;
				that.$Ajax('/api/user/address/getUserAddressList',data,res => {

					this.isShowPage = true;
					this.userAddressList = res.data.userAddressList
					if(res.data.userAddressList.length>0){
						this.lastId = res.data.userAddressList[res.data.userAddressList.length-1].id
						this.lsShow = true
					}else{
						this.lsShow = false
					}
					// this.pages = res.data.pages;
					// this.userAddressList = this.userAddressList.concat(res.data.list);
				}, err => {
				}
				)
			},
			checkActive(index,item){
				// if(this.active = index){
					this.active = index;
					this.setIsdefault(item);
				// }
			},
			/* 弹出框公用 */
			openPopup(e) {
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
			},
			changePopup(e) {
				this.typePopup = e.type;
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.operateBox-btn-chioce{
		height: 90rpx;
		line-height: 90rpx;
		background: #AD2926;
		border-radius: 118rpx;
		width: 92%;
		margin: 20rpx auto;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
	}
	.pages{
		background: #F9F9F9;
	}
	.scroll-height{
		height: calc(100vh - 140rpx);
	}
	
	.addrWrapper{
		padding-bottom: 180rpx;
	}
	.operateBox-bottomBox{
		background: none;
	}
	.addressBox{
		margin: 20rpx 24rpx;
		padding: 28rpx 24rpx;
		background: #fff;
		border-radius: 12rpx;
	}
	.operateBox{
		width: 100%;
		position: fixed;
		bottom: 10rpx;
		left: 0;
	}
	.address{
		@include flexLeft;
		position: relative;
		.addrBox{
			width: 100%;
		}
		&-top{
			@include flexLeft;
			.name{
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				margin-right: 32rpx;
			}
			.phone{
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}
		}
		.addr{
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 100%;
			margin-top: 16rpx;
			margin-bottom: 14rpx;
			word-break: break-all;
		}
		.addrImg{
			width: 72rpx;
			height: 72rpx;
			margin-right: 16rpx;
		}
		&-bottom{
			@include flexBetween;
			border-top: 1px solid rgba(233,233,233,0.2);
			margin-top: 16rpx;
			padding-top: 26rpx;
		}
		&-r{
			@include flexLeft;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.mo{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333;
				margin-left: 16rpx;
			}
		}
		&-l{
			@include flexRight;
			.edit{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333;
			}
			.delete{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #B1231C;
				margin-left: 28rpx;
			}
		}
	}
	.noData{
		margin-top: 240rpx;
		.noAddr{
			width: 328rpx;
			height: 328rpx;
			margin: auto;
			text-align: center;
		}
		.noTitle{
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #687383;
			margin: 16rpx auto 22rpx;
			text-align: center;
		}
		.noBtn{
			font-size: 28rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			background: $globalColor-style;
			border-radius: 50rpx;
			margin: auto;
			text-align: center;
			width: 20%;
			padding: 13rpx 0 15rpx;
		}
	}
</style>